<template>
  <div class="box">
    <el-table v-if="isDigit" :data="tableData" max-height="250">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="expertName" label="专家" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情') && !title.includes('详情')"
            v-model="scope.row.expertName"
          ></el-input>
          <span v-else>{{ scope.row.expertName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expertType" label="专家类型" width="150">
        <template #default="scope">
          <el-select v-if="scope.$index == tableData.length - 1 && !title.includes('详情')" :disabled="title.includes('详情')" v-model="scope.row.expertType">
            <el-option
              v-for="item in expertTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ scope.row.expertType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="specialty" label="专业类别" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.specialty"
          ></el-input>
          <span v-else>{{ scope.row.specialty }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="workUnitName" label="单位名称" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.workUnitName"
          ></el-input>
          <span v-else>{{ scope.row.workUnitName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="positionName" label="职称" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.positionName"
          ></el-input>
          <span v-else>{{ scope.row.positionName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pass" label="是否通过" width="150">
        <template #default="scope">
          <el-select v-if="scope.$index == tableData.length - 1 && !title.includes('详情')" :disabled="title.includes('详情')" v-model="scope.row.pass">
            <el-option
              v-for="item in passList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ scope.row.pass }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="opinion" label="评审意见" width="150">
        <template #default="scope">
          <el-input
            placeholder="请输入"
            v-if="scope.$index == tableData.length - 1 && !title.includes('详情')"
            :disabled="title.includes('详情')"
            v-model="scope.row.opinion"
          ></el-input>
          <span v-else>{{ scope.row.opinion }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" v-if="!title.includes('详情')" width="180">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
          <el-button
            type="primary"
            v-if="scope.$index == tableData.length - 1"
            size="small"
            @click.prevent="addRow(scope.row)"
          >
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-form
      ref="ruleFormRef"
      :model="form"
      label-position="top"
      label-width="110px"
      :inline="false"
      :rules="rules"
    >
      <el-form-item label="验收结论：" label-width="110px" required prop="checkConclusion">
        <el-input
          maxlength="512"
          show-word-limit
          type="textarea"
          :rows="7"
          :disabled="title.includes('详情')"
          v-model="form.checkConclusion"
          placeholder=""
        />
      </el-form-item>
      <el-form-item label="问题及建议：" required prop="problemSuggestion">
        <el-input
          maxlength="512"
          show-word-limit
          type="textarea"
          :rows="7"
          :disabled="title.includes('详情')"
          v-model="form.problemSuggestion"
        />
      </el-form-item>
      <el-form-item label="项目成果:" style="width: 100%">
        <el-upload
          ref="uploadRef"
          :limit="5"
          :disabled="title.includes('详情')"
          :headers="headers"
          v-model:file-list="attachmentFile"
          action="/fastDfs/file/upload"
          :on-success="handleAttachment"
          :on-preview="previewAttachment"
          :on-remove="removeAttachment"
          :on-exceed="handleExceed"
          :on-error="handleError"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { type } from '@/utils/utils'
import { ElMessage } from 'element-plus'
import { log } from 'mathjs'
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
    isDigit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const store = useStore()
    const data = reactive({
      filePathArray: [] as any,
      fileNameArray: [] as any,
    })
    const rules = reactive({
      checkConclusion: { required: true, message: '请填写验收结论' },
      problemSuggestion: { required: true, message: '请填写问题及建议' },
    })
    const form = store.state.projectCenter.projectAcceptanceForm

    let attachmentFile = []
    if (form.filePath.length > 0) {
      attachmentFile = type(form.filePath)
        ? JSON.parse(form.fileName).map((item, index) => {
            return {
              name: item,
              url: JSON.parse(form.filePath)[index],
            }
          })
        : []
    }
    console.log(attachmentFile, 'attachmentFile验收')
    const expertTypeList = [
      {
        value: '内部专家',
        label: '内部专家',
      },
      {
        value: '外部专家',
        label: '外部专家',
      }
    ]
    const passList = [
      {
        value: '通过',
        label: '通过',
      },
      {
        value: '不通过',
        label: '不通过',
      }
    ]
    
    const tableData =props.title.includes('详情')?ref([]):ref([
      {
        expertName: '',
        expertType: '',
        specialty: '',
        workUnitName: '',
        positionName: '',
        opinion: '',
        pass: '',
      },
    ])
    console.log(form.details,'form.details');
    
    tableData.value = [...form.details?(form.details):[],...tableData.value]
    const deleteRow = (index: number) => {
      tableData.value.splice(index, 1)
    }
    const addRow = (row) => {
      for (let key in row) {
        if (row[key] == '') {
          ElMessage({
            message: '请填写完整信息',
            type: 'warning',
          })
          return
        }
      }
      tableData.value.push({
        expertName: '',
        expertType: '',
        specialty: '',
        workUnitName: '',
        positionName: '',
        opinion: '',
        pass: '',
      })
    }
    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        data.filePathArray.push(uploadFile.data.path)
        data.fileNameArray.push(uploadFile.data.fileName)
        form.filePath = JSON.stringify(data.filePathArray)
        form.fileName = JSON.stringify(data.fileNameArray)
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }
    const previewAttachment = (uploadFile) => {
      console.log(uploadFile, 'uploadFile')
      if (props.title.includes('详情')) {
        window.open(uploadFile.url)
      } else {
        window.open(uploadFile.response.data.path)
      }
    }
    const removeAttachment = (file, uploadFiles) => {
      console.log(uploadFiles, 'uploadFiles')
      data.filePathArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.path
      })
      data.fileNameArray = uploadFiles.map((fileItem) => {
        return fileItem.response.data.fileName
      })
      form.filePath = JSON.stringify(data.filePathArray)
      form.fileName = JSON.stringify(data.fileNameArray)
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传5个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    const ruleFormRef = ref()
    const submitForm = async () => {
      return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid) => {
          console.log(valid, 'valid')
          if (valid) {
            let flag  =  tableData.value.every(row=>{
              for (let key in row) {
                if (row[key] == '') {
                  ElMessage({
                    message: '请填写完整的专家意见',
                    type: 'warning',
                  })
                  return false
                }else{
                  return true
                }
              }
            })
            if(!flag){
              console.log(flag,'asfasfas');
              return
            }
            console.log(tableData.value,'tableData.value');
            form.details = [...tableData.value]
            console.log(form.details,'form.details');
            resolve(form)
          } else {
            ElMessage({
              message: '请将基本信息补充完整',
              type: 'warning',
            })
            reject('校验失败')
          }
        })
      })
    }
    const cookie = () => localStorage.getItem('token')
    return {
      form,
      rules,
      ruleFormRef,
      submitForm,
      attachmentFile,
      tableData,
      expertTypeList,
      passList,
      deleteRow,
      addRow,
      handleAttachment,
      previewAttachment,
      removeAttachment,
      handleExceed,
      handleError,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
    }
  },
  beforeUnmount() {
    console.log('beforeUasdasdnmount')
    for (let key in this.form) {
      this.form[key] = ''
    }
  },
})
</script>
<style lang="scss" scoped>
:deep(.el-upload-list__item.is-success.focusing .el-icon-close-tip) {
  display: none !important;
}
</style>
